<template>
  <div class="update-view">
    <h1>修改资料</h1>
    <form @submit.prevent="handleUpdate">
      <div class="input-group">
        <label for="name">姓名</label>
        <input id="name" v-model="formData.name" type="text" placeholder="请输入姓名" required />
      </div>
      <div class="input-group">
        <label for="sex">性别</label>
        <select id="sex" v-model="formData.sex" required>
          <option value="">请选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="input-group">
        <label for="age">年龄</label>
        <input id="age" v-model.number="formData.age" type="number" placeholder="请输入年龄" required />
      </div>
      <div class="input-group">
        <label for="score">分数</label>
        <input id="score" v-model.number="formData.score" type="number" step="0.01" placeholder="请输入分数" required />
      </div>
      <div class="button-group">
        <button type="submit" class="update-button">更新</button>
        <button type="button" class="cancel-button" @click="goBack">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { studentApi, type Student } from '@/services/api'

const formData = ref<Student>({
  name: '',
  sex: '',
  age: 0,
  score: 0
})

const router = useRouter()

onMounted(() => {
  // 在实际应用中，这里应该从服务器获取当前用户数据
  // fetchCurrentUserData()
  // 为了演示，我们使用模拟数据
  formData.value = {
    name: '张三',
    sex: '男',
    age: 20,
    score: 85.5
  }
})

const handleUpdate = async () => {
  try {
    await studentApi.update(formData.value)
    alert('资料更新成功')
    router.push('/aboutme')
  } catch (error) {
    console.error('更新失败:', error)
    alert('更新失败，请重试')
  }
}

const goBack = () => {
  router.push('/aboutme')
}
</script>

<style scoped>
.update-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 375px;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 300px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.update-button, .cancel-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  flex: 1;
}

.update-button {
  background-color: #007bff;
  color: white;
}

.update-button:hover {
  background-color: #0056b3;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.cancel-button:hover {
  background-color: #5a6268;
}

@media (max-width: 390px) {
  .update-view {
    padding: 15px;
  }

  h1 {
    font-size: 22px;
  }

  .input-group label {
    font-size: 14px;
  }

  .input-group input,
  .input-group select {
    font-size: 14px;
  }
}
</style>